<template>
  <div>
    <div class="ol-map" ref="olMap"></div>
    <div
      id="markerdddd"
      style="width: 100px; height: 100px; background: red; color: white"
    >
      哈哈
    </div>
    <!--可以给元素设置一些样式-->
    <div class="ol-popup" ref="olPopup">{{olPopupText}}</div>
  </div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import { Tile as TileLayer } from "ol/layer";
import { OSM, XYZ, WMTS } from "ol/source";
import { fromLonLat } from "ol/proj";
import {
  defaults as defaultInteractions,
  DragRotateAndZoom,
} from "ol/interaction";
import { defaults, FullScreen, MousePosition, ScaleLine } from "ol/control";
import Overlay from "ol/Overlay";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import { Style, Icon } from "ol/style";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { Translate } from "ol/interaction";
import { Draw } from "ol/interaction";
import GeometryType from "ol/geom/GeometryType";
import { createRegularPolygon, createBox } from "ol/interaction/Draw";
import { Modify } from "ol/interaction"

export default {
  name: "exm1",
  data(){
    return {
      olPopupText: "default text"
    }
  },
  created() {},
  mounted() {
    // 使用内置的osm
    //  const tileLayer = new TileLayer({
    //      source: new OSM()
    //  });

    // 使用 天地图 的瓦片数据
    // const tileLayer = new TileLayer({
    //     source: new XYZ({
    //         url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=9b21fa580b77ebbb20ee6245e2fc96eb"
    //     })
    // })

    // ??? 如何加载 wmts 服务， 下面有问题代码
    // const tileLayer = new TileLayer({
    //     source: new WMTS({
    //         url: "http://t1.tianditu.gov.cn/vec_c/wmts?tk=9b21fa580b77ebbb20ee6245e2fc96eb"
    //     })
    // })

    // 使用 高德 的瓦片数据
    const tileLayer = new TileLayer({
      source: new XYZ({
        url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      }),
    });

    let map = new Map({
      layers: [tileLayer],
      view: new View({
        center: fromLonLat([120.771441, 30.756433]), // 地图中心点
        zoom: 15, // 缩放级别
        minZoom: 0,
        maxZoom: 18,
        constrainRotation: true, // 因为存在非整数的缩放级别，所以设置参数true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
      }),
      target: this.$refs.olMap,
      interactions: defaultInteractions().extend([new DragRotateAndZoom()]), // 旋转交互
      controls: defaults().extend([
        new FullScreen(), // 显示全屏
        new MousePosition(), // 显示鼠标当前位置的经纬度
        new ScaleLine(), // 显示比例尺
      ]),
    });

    // map 增加相关的事件
    // map.on("moveend", (e) => {
    //   console.log('地图移动', e)
    // });
    // map.on("rendercomplete", () => {
    //   console.log('渲染完成')
    // });
    map.on("click", (e) => {
      console.log("地图点击", e);
    });

    // 显示自定义的元素
    let marker = this.addCustomDomSty();
    console.log("marker", marker);
    // 添加到地图
    map.addOverlay(marker);
    // 从地图上删除
    // map.removeOverlay(marker);

    // 增加一个图片在地图上显示
    // 1. 实例化要素
    let feature = new Feature({
      geometry: new Point(fromLonLat([120.871441, 30.756433])),
    });

    // 2. 如果需要给要素增加以下自定义的数据
    let data = "这里是要素的数据";
    feature.set("data", data);
    // 3. 设置样式，这里就是显示一张图片icon
    feature.setStyle([
      new Style({
        image: new Icon({
          anchor: [0.5, 0.5],
          size: [30, 30],
          src: require("../assets/logo.png"), // 图片url
        }),
      }),
    ]);
    // 4. 定义矢量源
    // 实例化的时候也可以不添加feature，后续通过方法添加：source.addFeatures([feature])
    // 清空feature：source.clear()
    let source = new VectorSource({
      features: [feature],
    });
    // 5. 添加数据源到矢量图层
    let vector = new VectorLayer({
      source,
    });
    // 6. 添加到map地图中
    map.addLayer(vector);

    console.log("-------------------");

    // 使增加的图标可以拖动
    let translate = new Translate({
      layers: [vector],
    });
    map.addInteraction(translate);
    // 可以监听一下拖动开始和结束的事件，拖动后的经纬度可以从e里面获取
    translate.on("translateend", (e) => {
      console.log("拖动结束", e);
    });
    translate.on("translatestart", (e) => {
      console.log("拖动开始", e);
    });

    console.log("--------------------------");
    // 鼠标点击的位置上添加一个要素
    let draw = new Draw({
      source: source,
      type: GeometryType.POINT,
      feature: new Feature({

      }),
      // style: new Style({
      //   image: new Icon({
      //     anchor: [0.5, 0.5],
      //     size: [60, 60],
      //     src: require("../assets/logo.png")
      //   }),
      // }),
    });
    draw.on("drawend", (e) => {
      console.log("drawend", e);
      // 如果只需要放置一个的话可以移除该交互，否则可以一直添加
      map.removeInteraction(draw)
    });
    map.addInteraction(draw);

    // ----------------------------------
    // 给标记添加相应的提示
    let toolTipOverLater = new Overlay({
      element: this.$refs.olPopup,
      positioning: "bottom-center", // 根据position属性的位置来进行相对点位
      offset: [0, -30], // 在positioning之上再进行偏移
      autoPan: true
    })
    map.addOverlay(toolTipOverLater);
    
    // 给地图绑定鼠标移动事件，检测鼠标位置所在是否存在feature，如果是目标feature的话就显示tooltip
    map.on("pointermove", (e) => {
      this.olPopupText = "";
      map.forEachFeatureAtPixel(e.pixel , (f, layer) => {
        // if(layer !==  vector || f.get('data')) {
        //   return false;
        // }
        // this.olPopupText = f.get('data');
        if(layer !==  vector){
          return false;
        }
        this.olPopupText = "tips";
        toolTipOverLater.setPosition(f.getGeometry().getCoordinates());
      })
    });
    // --------------------------------
    // 绘制多边形(园)
    // let drawCircle = new Draw({
    //   source: source,
    //   type: 'Circle'
    // })
    // map.addInteraction(drawCircle)
    // 绘制正方形
    // createRegularPolygon方法执行后返回一个创建正方形的geometryFunction
    // createBox方法执行后返回一个创建长方形的geometryFunction
    // let drawZhengfangxing = new Draw({
    //    source: source,
    //   type: 'Circle',
    //   geometryFunction: createBox()
    // });
    // map.addInteraction(drawZhengfangxing);

    //绘制多边形
    let modify = new Modify({
      source
    });
    map.addInteraction(modify);
  },

  methods: {
    addCustomDomSty() {
      let el = document.createElement("div");
      el.innerText = "test";
      el.style.width = "20px";
      el.style.height = "20px";
      el.style.background = "red";
      // document.body.appendChild(el)
      let marker = new Overlay({
        element: el, // 要显示的元素
        position: fromLonLat([120.771441, 30.756433]), // 地图投影的位置
        offset: [-17, -17], // 元素显示的像素偏移量
        autoPan: true, // 自动移动地图以完整的显示元素
        stopEvent: false,
        positioning: "center-center",
      });

      return marker;
    },

  },
};
</script>

<style scope>
.ol-map {
  height: 90vh;
}

.ol-popup {
  width: 40px;
  height: 30px;
  font-size: 14px;
  text-align: center;

}
</style>